<template>
  <div class="model-quality-container" ref="aiRef" :style="{ height: domHeight + 'px' }">
    <div class="quality-header">
      <div class="header-icon">
        <Icon icon="ep:cpu" />
      </div>
      <div class="header-content">
        <h3 class="header-title">大模型质检</h3>
        <p class="header-subtitle">AI智能质检配置管理</p>
      </div>
    </div>

    <el-row :gutter="20" class="main-content">
      <!-- 左侧模型列表 -->
      <el-col :span="4" class="sidebar-section">
        <div class="sidebar-wrapper">
          <div class="add-button-wrapper">
            <el-button type="primary" class="add-model-btn" plain :icon="Plus" @click="addModel">
              <Icon icon="ep:plus" class="btn-icon" />
              <span class="btn-text">添加大模型质检</span>
            </el-button>
          </div>

          <div class="model-list-wrapper">
            <el-scrollbar class="model-scrollbar" @scroll="handleScroll" ref="containerRef">
              <div class="model-list">
                <div
                  class="model-item"
                  v-for="item in list"
                  :key="item.id"
                  @click="changeItem(item)"
                  :class="{ active: activeItem == item.id }"
                >
                  <div class="model-content">
                    <Icon icon="ep:cpu" class="model-icon" />
                    <div class="model-info">
                      <el-text class="model-name">{{ item.name }}</el-text>
                    </div>
                  </div>
                  <el-icon class="delete-icon" @click.stop="del(item)" color="#f56c6c">
                    <DeleteFilled />
                  </el-icon>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </el-col>

      <!-- 分隔线 -->
      <el-col :span="0.1" class="divider"></el-col>

      <!-- 右侧配置区域 -->
      <el-col :span="19" class="config-section">
        <div class="config-wrapper">
          <!-- 操作栏 -->
          <div class="config-header">
            <div class="config-title">
              <Icon icon="ep:setting" class="title-icon" />
              <span>质检配置</span>
            </div>
            <el-button
              type="primary"
              :disabled="loading"
              :icon="Plus"
              @click="submit"
              class="save-btn"
            >
              <Icon icon="ep:check" class="btn-icon" />
              {{ operaType == 'add' ? '新增' : '保存' }}
            </el-button>
          </div>

          <!-- 质检名称 -->
          <div class="name-section">
            <div class="section-header">
              <Icon icon="ep:document" class="section-icon" />
              <span class="section-title">质检名称</span>
            </div>
            <el-input
              v-model="formData.name"
              clearable
              placeholder="请输入质检名称"
              class="enhanced-input"
            >
              <template #prefix>
                <Icon icon="ep:edit" />
              </template>
            </el-input>
          </div>

          <!-- 触发条件 -->
          <div class="condition-section">
            <div class="section-header">
              <Icon icon="ep:lightning" class="section-icon" />
              <span class="section-title">触发条件</span>
            </div>

            <div class="condition-content">
              <el-form-item label="客户等级" class="form-item">
                <el-select
                  v-model="formData.levelConditionIds"
                  multiple
                  collapse-tags
                  placeholder="请选择客户等级"
                  class="enhanced-select"
                >
                  <el-option
                    v-for="dict in resultLevel"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  >
                    <el-tag
                      :disable-transitions="false"
                      :style="{
                        background: dict.bgColor,
                        color: dict.textColor,
                        marginRight: '10px',
                        border: 'none',
                        cursor: 'pointer',
                        paddingRight: '9px'
                      }"
                    >
                      {{ dict.name }}
                    </el-tag>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="其他条件" class="form-item">
                <div class="other-conditions">
                  <div
                    v-for="(it, index) in formData.aiQualityTestingElseConditionList"
                    class="condition-row"
                    :key="index"
                  >
                    <el-select v-model="it.type" class="condition-select" placeholder="请选择条件">
                      <el-option
                        v-for="item in optionType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>

                    <el-select class="condition-select" v-model="it.query" placeholder="请选择条件">
                      <el-option
                        v-for="item in optionQuery"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>

                    <div class="value-input-wrapper">
                      <el-input
                        v-model="it.value"
                        :formatter="(value) => value.replace(/[^\d]/g, '')"
                        placeholder="请输出次数"
                        class="value-input"
                      />
                      <span class="unit-text" v-if="it.type == 2">次</span>
                      <span class="unit-text" v-else>秒</span>
                    </div>

                    <div class="condition-actions">
                      <el-icon
                        size="20"
                        v-if="index == 0"
                        class="action-icon add-icon"
                        @click="addList"
                      >
                        <CirclePlusFilled />
                      </el-icon>
                      <el-icon
                        size="20"
                        v-if="formData.aiQualityTestingElseConditionList.length == 2"
                        class="action-icon remove-icon"
                        @click="delList(index)"
                      >
                        <RemoveFilled />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>

          <!-- 提示词指令 -->
          <div class="prompt-section">
            <div class="section-header">
              <Icon icon="ep:chat-dot-round" class="section-icon" />
              <span class="section-title">提示词指令</span>
            </div>

            <div class="prompt-grid">
              <div
                class="prompt-card"
                v-for="(items, indexs) in formData.aiQualityTestingLabelList"
                :key="indexs"
                :class="`prompt-card-${indexs}`"
              >
                <div class="prompt-content">
                  <el-input
                    class="prompt-input"
                    v-model="items.content"
                    placeholder="请输入用户意向"
                    clearable
                  />
                  <el-select
                    collapse-tags
                    v-model="items.followUpType"
                    placeholder="请选择后续动作"
                    multiple
                    class="follow-select"
                  >
                    <el-option
                      v-for="item in optionFollow"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </div>
          </div>

          <!-- 标签指令 -->
          <div class="label-section">
            <div class="section-header">
              <Icon icon="ep:price-tag" class="section-icon" />
              <span class="section-title">标签指令</span>
            </div>

            <div class="label-config">
              <div class="label-item">
                <el-form-item label="最大标签数量" class="form-item">
                  <div class="input-with-unit">
                    <el-input
                      :formatter="(value) => value.replace(/[^\d]/g, '')"
                      @blur="validateMinValue"
                      v-model="formData.labelMaxNum"
                      class="enhanced-input"
                    />
                    <span class="unit-text">个</span>
                  </div>
                </el-form-item>
              </div>

              <div class="label-item">
                <el-form-item label="单个标签字数" class="form-item">
                  <div class="input-with-unit">
                    <el-input
                      @blur="validateMinValue2"
                      :formatter="(value) => value.replace(/[^\d]/g, '')"
                      v-model="formData.labelWordNum"
                      class="enhanced-input"
                    />
                    <span class="unit-text">字</span>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import {
  aiQualityPage,
  getAiQuality,
  createAiQuality,
  updateAiQuality,
  delAiQuality
} from '@/api/call/model_quality'
import * as LevelApi from '@/api/crm/customerTagConfig'
import { RemoveFilled, CirclePlusFilled, DeleteFilled } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'

const queryParams = reactive({
  pageNo: 1,
  pageSize: 30
})
const formData = reactive({
  name: '质检名称',
  levelConditionIds: [], //等级标签id
  labelMaxNum: 3, //标签数量
  labelWordNum: 4, //标签字数
  aiQualityTestingElseConditionList: [
    {
      type: 1, //1通话时长,2互通次数
      query: 1, //1:大于等于2:小于等于
      value: 1 //查询条件值
    }
  ],
  aiQualityTestingLabelList: [
    {
      content: '客户非常有意向',
      followUpType: []
    },
    {
      content: '客户有一点点的意向',
      followUpType: []
    },
    {
      content: '客户没有意向',
      followUpType: []
    },
    {
      content: '客户拒绝',
      followUpType: []
    },
    {
      content: '',
      followUpType: []
    },
    {
      content: '',
      followUpType: []
    }
  ]
})
const optionType = [
  { label: '通话时长', value: 1 },
  { label: '互通次数', value: 2 }
]
const optionQuery = [
  { label: '大于等于', value: 1 },
  { label: '小于等于', value: 2 }
]
const optionFollow = [
  { label: '转线索', value: 1 },
  { label: '转线索公海', value: 2 },
  { label: '转客户', value: 3 },
  { label: '转客户公海', value: 4 },
  { label: '加微信', value: 5 }
]
const activeItem = ref(null)
const list = ref([])
const total = ref(0)

const del = async (item) => {
  await ElMessageBox.confirm('确认移除该质检吗？', '提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
  })
  await delAiQuality(item.id)
  queryParams.pageNo = 1
  getList()
  ElMessage.success('操作成功')
}
const validateMinValue = () => {
  if (formData.labelMaxNum && Number(formData.labelMaxNum) < 3) {
    formData.labelMaxNum = 3
  }
}
const validateMinValue2 = () => {
  if (formData.labelMaxNum && Number(formData.labelMaxNum) < 4) {
    formData.labelMaxNum = 4
  }
}
const addList = () => {
  if (formData.aiQualityTestingElseConditionList.length == 1) {
    formData.aiQualityTestingElseConditionList.push({
      type: formData.aiQualityTestingElseConditionList[0].type == 1 ? 2 : 1,
      query: 1,
      value: 1
    })
  } else {
    ElMessage.warning('超出限制')
  }
}
const delList = (index) => {
  formData.aiQualityTestingElseConditionList.splice(index, 1)
}
const getList = async () => {
  const data = await aiQualityPage(queryParams)
  list.value = data.list
  total.value = data.total
  if (list.value.length) {
    changeItem(list.value[0])
  }
}
const containerRef = ref(null)
const isHave = ref(false)

const handleScroll = async ({ scrollTop }) => {
  const container = containerRef.value.wrapRef
  if (scrollTop + container.clientHeight >= container.scrollHeight) {
    if (isHave.value) return
    queryParams.pageNo += 1
    const data = await aiQualityPage(queryParams)
    if (data.list.length != 0) {
      data.list.map((item) => {
        list.value.push(item)
      })
      isHave.value = false
    } else {
      isHave.value = true
    }
  }
}
const operaType = ref(null)
const changeItem = async (item) => {
  activeItem.value = item.id
  operaType.value = 'update'
  const data = await getAiQuality({ id: item.id })
  formData.name = data.name
  formData.levelConditionIds = data.levelConditionIds.split(',').map((item) => Number(item))
  formData.aiQualityTestingElseConditionList = data.aiQualityTestingElseConditionList
  data.aiQualityTestingLabelList.forEach((item) => {
    item.followUpType = item.followUpType
      ? item.followUpType.split(',').map((item) => Number(item))
      : []
  })
  if (data.aiQualityTestingLabelList.length == 4) {
    data.aiQualityTestingLabelList.push({
      content: '',
      followUpType: []
    })
    data.aiQualityTestingLabelList.push({
      content: '',
      followUpType: []
    })
  }
  if (data.aiQualityTestingLabelList.length == 5) {
    data.aiQualityTestingLabelList.push({
      content: '',
      followUpType: []
    })
  }
  formData.aiQualityTestingLabelList = data.aiQualityTestingLabelList
  formData.labelWordNum = data.labelWordNum
  formData.labelMaxNum = data.labelMaxNum
}
const addModel = () => {
  operaType.value = 'add'
  activeItem.value = ''
  activeItem.value = null

  formData.name = '质检名称'
  formData.levelConditionIds = []
  formData.aiQualityTestingElseConditionList = [
    {
      type: 1,
      query: 1,
      value: 1
    }
  ]
  formData.aiQualityTestingLabelList = [
    {
      content: '客户非常有意向',
      followUpType: []
    },
    {
      content: '客户有一点点的意向',
      followUpType: []
    },
    {
      content: '客户没有意向',
      followUpType: []
    },
    {
      content: '客户拒绝',
      followUpType: []
    },
    {
      content: '',
      followUpType: []
    },
    {
      content: '',
      followUpType: []
    }
  ]
  formData.labelWordNum = 4
  formData.labelMaxNum = 3
}
const domHeight = ref(0)
// 等级列表
const resultLevel = ref([])
const getLevel = async () => {
  resultLevel.value = await LevelApi.getLevelSimple()
}
const aiRef = ref(null)
onMounted(() => {
  domHeight.value = aiRef.value.parentElement.offsetHeight - 40
  queryParams.pageNo = 1
  getList(true)
  getLevel()
})
const loading = ref(false)
const submit = async () => {
  if (formData.name == '') {
    ElMessage.warning('质检名称不能为空')
    return
  }
  if (
    formData.aiQualityTestingLabelList[0].followUpType.length == 0 ||
    formData.aiQualityTestingLabelList[1].followUpType.length == 0 ||
    !formData.aiQualityTestingLabelList[0].content ||
    !formData.aiQualityTestingLabelList[1].content
  ) {
    ElMessage.warning('提示词指令前两个不能为空')
    return
  }
  try {
    loading.value = true
    const obj = cloneDeep(formData)
    obj.levelConditionIds = obj.levelConditionIds.join(',')
    for (let i = obj.aiQualityTestingLabelList.length - 1; i >= 0; i--) {
      obj.aiQualityTestingLabelList[i].followUpType =
        obj.aiQualityTestingLabelList[i].followUpType.join(',')
      if ((i === 4 || i === 5) && !obj.aiQualityTestingLabelList[i].followUpType) {
        obj.aiQualityTestingLabelList.splice(i, 1)
      }
    }
    if (operaType.value == 'add') {
      await createAiQuality(obj)
    } else {
      obj.id = activeItem.value
      await updateAiQuality(obj)
    }
    ElMessage.success('操作成功!')
    queryParams.pageNo = 1
    getList()
    loading.value = false
  } catch {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.model-quality-container {
  width: 100%;
  flex-grow: 1;
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

/* 页面头部 */
.quality-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 主要内容区域 */
.main-content {
  height: calc(100% - 100px);

  @media (max-width: 768px) {
    flex-direction: column;
    height: auto;
  }
}

/* 左侧边栏 */
.sidebar-section {
  @media (max-width: 768px) {
    width: 100% !important;
    margin-bottom: 16px;
  }
}

.sidebar-wrapper {
  background: white;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);

  @media (max-width: 768px) {
    height: auto;
    max-height: 300px;
  }
}

.add-button-wrapper {
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.add-model-btn {
  width: 100%;
  border: 2px solid #0052cc;
  color: #0052cc;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 500;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.05);
  }

  @media (max-width: 768px) {
    padding: 10px 12px;
    font-size: 14px;
  }

  .btn-icon {
    margin-right: 6px;
  }

  .btn-text {
    @media (max-width: 768px) {
      display: none;
    }
  }
}

.model-list-wrapper {
  height: calc(100% - 68px);

  @media (max-width: 768px) {
    height: 200px;
  }
}

.model-scrollbar {
  height: 100%;
}

.model-list {
  padding: 8px;
}

.model-item {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #ecf5ff;

    .delete-icon {
      opacity: 1;
    }
  }

  &.active {
    background: linear-gradient(135deg, #ecf5ff 0%, #e1f3ff 100%);
    border: 1px solid rgba(0, 82, 204, 0.2);
  }
}

.model-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.model-icon {
  color: #0052cc;
  font-size: 16px;
  flex-shrink: 0;
}

.model-info {
  flex: 1;
  min-width: 0;
}

.model-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.delete-icon {
  opacity: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;

  &:hover {
    transform: scale(1.1);
  }
}

/* 分隔线 */
.divider {
  background: #f1f5f9;
  height: 100%;

  @media (max-width: 768px) {
    display: none;
  }
}

/* 右侧配置区域 */
.config-section {
  @media (max-width: 768px) {
    width: 100% !important;
  }
}

.config-wrapper {
  background: white;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);

  @media (max-width: 768px) {
    height: auto;
  }
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
  }
}

.config-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.title-icon {
  color: #0052cc;
  font-size: 18px;
}

.save-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 配置区域内容 */
.name-section,
.condition-section,
.prompt-section,
.label-section {
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;

  &:last-child {
    border-bottom: none;
  }

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #0052cc;
}

.section-icon {
  color: #0052cc;
  font-size: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 16px;

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
  }
}

.enhanced-input,
.enhanced-select {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

/* 其他条件样式 */
.other-conditions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.condition-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

.condition-select {
  flex: 1;
  min-width: 120px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.value-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 120px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.value-input {
  width: 100%;
  padding-right: 30px;
}

.unit-text {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 14px;
  pointer-events: none;
}

.condition-actions {
  display: flex;
  gap: 8px;
}

.action-icon {
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    transform: scale(1.1);
  }

  &.add-icon {
    color: #10b981;
  }

  &.remove-icon {
    color: #f56c6c;
  }
}

/* 提示词网格 */
.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.prompt-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  transition: all 0.2s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  }

  &::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 12px;
    width: 4px;
    height: 18px;
    border-radius: 2px;
  }

  &.prompt-card-0::before {
    background-color: #4f7afd;
  }

  &.prompt-card-1::before {
    background-color: #33b028;
  }

  &.prompt-card-2::before {
    background-color: #ff5050;
  }

  &.prompt-card-3::before {
    background-color: #ffb025;
  }

  &.prompt-card-4::before {
    background-color: #786de5;
  }

  &.prompt-card-5::before {
    background-color: #a2a5b4;
  }

  @media (max-width: 768px) {
    padding: 12px;
  }
}

.prompt-content {
  display: flex;
  gap: 12px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
  }
}

.prompt-input {
  flex: 1;
  margin-left: 16px;

  @media (max-width: 768px) {
    margin-left: 12px;
  }
}

.follow-select {
  flex: 1;
}

/* 标签配置 */
.label-config {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.label-item {
  .form-item {
    margin-bottom: 0;
  }
}

.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;

  .unit-text {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 14px;
    pointer-events: none;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .model-quality-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .sidebar-wrapper,
  .config-wrapper {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .config-header {
    background: #4b5563;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .header-title,
  .config-title,
  .section-title {
    color: #f9fafb;
  }

  .model-name {
    color: #f9fafb;
  }

  .name-section,
  .condition-section,
  .prompt-section,
  .label-section {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .section-header {
    border-color: #60a5fa;
  }

  .section-icon,
  .title-icon {
    color: #60a5fa;
  }

  .prompt-card {
    background: #4b5563;
    border-color: #6b7280;
  }

  .enhanced-input,
  .enhanced-select {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .unit-text {
    color: #d1d5db;
  }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
  .enhanced-input,
  .enhanced-select {
    :deep(.el-input__wrapper) {
      border: 2px solid #0052cc;
      box-shadow: none;

      &:hover,
      &.is-focus {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
      }
    }
  }

  .prompt-card {
    border: 2px solid #e5e7eb;
  }

  .save-btn {
    background: #0052cc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

/* 减少动画模式适配 */
@media (prefers-reduced-motion: reduce) {
  .enhanced-input,
  .enhanced-select,
  .model-item,
  .prompt-card,
  .action-icon,
  .delete-icon {
    transition: none;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .enhanced-input,
  .enhanced-select {
    :deep(.el-input__wrapper) {
      min-height: 44px;
    }
  }

  .add-model-btn,
  .save-btn {
    min-height: 44px;
    padding: 12px 20px;
  }

  .model-item {
    min-height: 44px;
    padding: 12px;
  }

  .action-icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .quality-header {
    padding: 12px;
  }

  .name-section,
  .condition-section,
  .prompt-section,
  .label-section {
    padding: 12px;
  }

  .config-header {
    padding: 12px;
  }

  .prompt-grid {
    gap: 8px;
  }

  .label-config {
    gap: 12px;
  }
}

/* 横屏模式适配 */
@media (max-width: 768px) and (orientation: landscape) {
  .quality-header {
    flex-direction: row;
    text-align: left;
    padding: 12px 16px;
  }

  .main-content {
    flex-direction: row;
    height: calc(100% - 80px);
  }

  .sidebar-section {
    width: 30% !important;
    margin-bottom: 0;
  }

  .config-section {
    width: 70% !important;
  }

  .sidebar-wrapper {
    height: 100%;
  }

  .model-list-wrapper {
    height: calc(100% - 68px);
  }
}
</style>
